import { UserOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import { Tag, Tooltip } from 'antd'
import { type ChatOwner } from '@/desktop/logics/chat/info'
import { colors } from '@/desktop/styles'
import { useChatSidebars } from '@/desktop/views/chat-sidebars'
import { useStreams } from '@/lib/utils'
import services from '@/services'
import { type ContactWithTransfer, ContactType } from '@/services/contacts'
import './title.module.less'

export function ChatTitle(props: { contact: ContactWithTransfer; owner: ChatOwner }) {
  const { contact, owner } = props
  const [groupMembers, observingReadonly] = useStreams(
    services.groups.members,
    services.auth.observing.readonly$,
  )

  return <header styleName="chat-title">
    <div styleName="name">
      {contact.remark ? `${contact.remark}（${contact.name}）` : contact.name}
    </div>
    {contact.type === ContactType.external && contact.deleted !== null ? (
      <Tag styleName="deleted">删</Tag>
    ) : null}
    {contact.type === ContactType.group && groupMembers.length ? (
      <span styleName="group-members">
        <UserOutlined />
        <span styleName="number">{groupMembers.length}</span>
      </span>
    ) : null}
    <span styleName="owner-name">{owner.friendlyFullName}</span>
    {observingReadonly ? <SidebarToggle /> : null}
  </header>
}

function SidebarToggle() {
  const { switchShow, showingSidebar } = useChatSidebars()

  if (switchShow === null) return null
  return showingSidebar ? (
    <Tooltip title="收起侧边栏" key="show">
      <MenuUnfoldOutlined css={toggleStyle} onClick={switchShow} />
    </Tooltip>
  ) : (
    <Tooltip title="展开侧边栏" key="hide" placement="left">
      <MenuFoldOutlined css={toggleStyle} onClick={switchShow} />
    </Tooltip>
  )
}
const toggleStyle = css`
  color: #555;
  font-size: 22px;
  margin-left: 22px;
  margin-right: -12px;
  &:hover {
    color: ${colors.link};
  }
`
